<template>
  <div class="title-container">
    <div class="content-title" :class="{'style-one': bgType}" v-if="type === 0">
      <span class='title' :class="{'title-bg': !bgType}">{{ title }}</span>
    </div>
    <div class="board-center-title" v-else>
      <img class="title-icon" src="~assets/images/left-icon.png" alt="">
      <span class="title-content">{{ title }}</span>
      <img class="title-icon" src="~assets/images/right-icon.png" alt="">
    </div>
    <span class="board-expand cursor__pointer" v-if="hasExpand" @click="$emit('expand')"></span>
  </div>
</template>

<script>
  export default {
    name: "boardTitle",
    props: {
      title: {
        type: String,
        default: '',
      },
      bgType: {
        type: Number,
        default: 0,
      },
      type: {
        type: Number,
        default: 0,
      },
      hasExpand: {
        type: Boolean,
        default: true,
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title-container {
    position: relative;

    .content-title {
      line-height: 24px;
      text-align: center;
      font-size: 7px;
      color: #fff;

      .title {
        display: inline-block;
        width: 134px;
        height: 100%;

        &.title-bg {
          position: relative;
          top: -2px;
          background-image: url("~assets/images/title-bg.png");
          background-size: 100% 100%;
        }
      }

      &.style-one {
        background-size: 100% 100%;
        background-image: url("~assets/images/title-bg2.png");
      }
    }

    .board-expand {
      position: absolute;
      top: 8px;
      right: 13px;
      width: 12px;
      height: 12px;
      background-image: url("~assets/images/btn_zhankai.png");
      background-size: 100% 100%;
    }

    .board-center-title {
      line-height: 20px;
      text-align: center;

      .title-icon {
        width: 28px;
        height: 3px;
        vertical-align: middle;
      }

      .title-content {
        font-size: 7px;
        font-weight: bold;
        margin: 0 14px;
        color: #fff;
      }
    }
  }
</style>
